<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/load.js"></script>
</head>

<body>
    <div id="container">
        <div id="formcontainer">
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label required">源图像</label>
                        <div class="layui-input-block">
                            <button class="layui-btn" onclick="HandleChooseSource()">选择</button><br />
                            <img id="sourceimage" src="" width="200" height="200" alt="图片 预览..." style="display:none"> <br />
                            <input type="file" name="sourcefile" id="sourcefile" style="display:none" onchange="SourceFileChange()" />
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label required">比对图像</label>
                        <div class="layui-input-block">
                            <button class="layui-btn" onclick="HandleChooseCompare()">选择</button><br />
                            <img id="compareimage" src="" width="200" height="200" alt="图片 预览..." style="display:none"> <br />
                            <input type="file" name="comparefile" id="comparefile" style="display:none" onchange="CompareFileChange()" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="opcontainer">
            <button class="layui-btn" onclick="HandleCompare()">比对</button>
            <button class="layui-btn layui-btn-primary" onclick="HandleClose()">关闭</button>
        </div>
    </div>
</body>
<script>
    $(function() {

    })

    function HandleCompare() {
        var source = $("#sourceimage").attr("src");
        if (source == "") {
            OpenFailMessage("请选择源图像");
            return;
        }
        var compare = $("#compareimage").attr("src");
        if (compare == "") {
            OpenFailMessage("请选择比对图像");
            return;
        }
        var param = {
            sourceBase64Image: source,
            compareBase64Image: compare
        }
        StartLoading("比对中");
        HttpPost(JSON.stringify(param), 'face/regist/compare', function(result) {
            CloseLoading();
            OpenSuccessMessage(result.msg)
        })
    }

    function HandleChooseSource() {
        document.getElementById("sourcefile").click();
    }

    function SourceFileChange() {
        var preview = document.getElementById("sourceimage");
        var file = document.getElementById("sourcefile").files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
            preview.src = reader.result;
            $("#sourceimage").show();
        }
    }

    function HandleChooseCompare() {
        document.getElementById("comparefile").click();
    }

    function CompareFileChange() {
        var preview = document.getElementById("compareimage");
        var file = document.getElementById("comparefile").files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
            preview.src = reader.result;
            $("#compareimage").show();
        }
    }

    function HandleClose() {
        CloseDialog();
    }
</script>

</html>